<template>
  <a-layout class="music-detail-container">
    <a-layout-content>
      <div class="detail-content">
        <a-button type="primary" @click="goBack" style="margin-bottom: 20px;">返回</a-button>
        <a-card class="album-card">
          <div class="album-info">
            <img :src="album.image" :alt="album.title" class="album-image" />
            <div class="album-details">
              <h1>{{ album.title }}</h1>
              <p class="artist">{{ album.artist }}</p>
              <p class="release-date">Release Date: {{ album.releaseDate }}</p>
              <p class="price">Price: {{ album.price }}</p>
            </div>
          </div>
          <div class="album-description">
            <h2>Description</h2>
            <p>{{ album.description }}</p>
          </div>
        </a-card>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const album = ref({
  title: '',
  artist: '',
  image: '',
  releaseDate: '',
  price: '',
  description: ''
});


const mockAlbums = [
  {
    id: 1,
    title: "Summer Vibes",
    artist: "Various Artists",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6979010.jpg?max_age=2592000",
    releaseDate: "2023-07-15",
    price: "$9.99",
    description: "A collection of summer hits to brighten your day"
  },
  {
    id: 2,
    title: "Rock Classics",
    artist: "Legendary Bands",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6980715.jpg?max_age=2592000", // 修正多余的结尾字母o
    releaseDate: "2022-12-01",
    price: "$12.99",
    description: "Timeless rock anthems from legendary bands"
  },
  {
    id: 3,
    title: "Jazz Nights",
    artist: "Smooth Jazz Ensemble",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6981694.jpg?max_age=2592000",
    releaseDate: "2023-05-20",
    price: "$10.99",
    description: "Relaxing jazz melodies for your evening"
  }
];
const fetchAlbumDetails = async (albumId: string) => {
  try {
    // 这里可以替换为实际的API调用
    // const response = await fetch(`/api/albums/${albumId}`);
    // const data = await response.json();
    const foundAlbum = mockAlbums.find(a => a.id === Number(albumId));
      if (!foundAlbum) throw new Error('Album not found');
      
      album.value = {
        ...foundAlbum,
        releaseDate: new Date(foundAlbum.releaseDate).toLocaleDateString(),
      };
    // 更新album对象
    // album.value = {
    //   title: data.title,
    //   artist: data.artist,
    //   image: data.image,
    //   releaseDate: data.releaseDate,
    //   price: data.price,
    //   description: data.description
    // };
  } catch (error) {
    console.error('Failed to fetch album details:', error);
  }
};
onMounted(() => {
  const albumId = route.params.id as string;
  fetchAlbumDetails(albumId);
});

const goBack = () => {
  router.push({ name: 'Home' });
};
</script>

<style scoped>
.music-detail-container {
  padding: 24px;
}

.detail-content {
  max-width: 800px;
  margin: 0 auto;
}

.album-card {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.album-info {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.album-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-right: 24px;
  border-radius: 8px;
}

.album-details h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.album-details .artist {
  font-size: 18px;
  color: #666;
  margin-bottom: 12px;
}

.album-details .release-date,
.album-details .price {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.album-description h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.album-description p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}
</style>